Ext.onReady(function(){

	var fm = Ext.form;
	
    var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: true // columns are not sortable by default           
        },
        columns: [
            {
                id: 'name', header: 'Name', dataIndex: 'name', width: 100,
                editor: new fm.TextField({
                    allowBlank: true
                })
			}, {
                header: 'Type', dataIndex: 'type', width: 80,
                editor: new fm.TextField({
                    allowBlank: true
                })
            }, {
                header: 'attr1', dataIndex: 'attr1', width: 220,
                editor: new fm.TextField({
                    allowBlank: true
                })
            }, {
                header: 'attr2', dataIndex: 'attr2', width: 220,
                editor: new fm.TextField({
                    allowBlank: true
                })
            }, {
                header: 'attr3', dataIndex: 'attr3', width: 220,
                editor: new fm.TextField({
                    allowBlank: true
                })
            }, {
				header: 'Description', dataIndex: 'desc', width: 220,
                editor: new fm.TextField({
                    allowBlank: true
                })
            }
        ]
    });
	
    // create the Data Store
    var store = new Ext.data.GroupingStore({
        // load using HTTP
        url: 'db/DatabaseManager.asp',

        reader: new Ext.data.Reader({
               record: 'Item',
               id: '@id',
               totalRecords: '@total'
           }, [
               {name: 'id', mapping: '@id', type: 'string'},
			   {name: 'name', mapping: '@name', type: 'string'},
			   {name: 'type', mapping: '@type', type: 'string'},
               {name: 'desc', mapping: '@attr1', type: 'string'},
               {name: 'attr2', mapping: '@attr2', type: 'string'},
			   {name: 'attr3', mapping: '@attr3', type: 'string'},
			   {name: 'desc', mapping: '@desc', type: 'string'}
           ])
		//groupField:'type'
    });
	
    // create the grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
		cm: cm,
        renderTo:'datagrid',
        width:1000,
        height:600,
		clicksToEdit: 1,
		view: new Ext.grid.GroupingView({
            forceFit:false,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        })

    });

    store.load();
});
